.artifactButton {
    position: relative;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--mantine-radius-md);
    transition: all 0.12s ease;
    outline: none;

    @mixin light {
        background: var(--mantine-color-white);
        border: 1px solid var(--mantine-color-indigo-1);
    }
    @mixin dark {
        background: var(--mantine-color-dark-7);
        border: 1px solid var(--mantine-color-ldGray-2);
    }
    box-shadow: var(--mantine-shadow-subtle);
}

.artifactButton:hover {
    @mixin light {
        background: #f8faff;
    }
    @mixin dark {
        background: var(--mantine-color-dark-6);
    }
    box-shadow: var(--mantine-shadow-subtle);
}

.artifactButton[data-artifact-open='true'] {
    @mixin light {
        background: #f8faff;
        border: 1px solid var(--mantine-color-indigo-1);
    }
    @mixin dark {
        background: var(--mantine-color-dark-6);
        border: 1px solid var(--mantine-color-ldGray-2);
    }
    box-shadow: var(--mantine-shadow-subtle);
}

.artifactButton[data-artifact-open='true']:hover {
    @mixin light {
        background: #f8faff;
        border-color: var(--mantine-color-indigo-1);
    }
    @mixin dark {
        background: var(--mantine-color-dark-5);
        border-color: var(--mantine-color-ldGray-2);
    }
}

.artifactButton[data-loading='true'] {
    cursor: wait;
    opacity: 0.6;
}

.container {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-sm);
    padding: var(--mantine-spacing-sm);
}

.icon {
    color: var(--mantine-color-indigo-6);
    transition: color 0.12s ease;
}

.artifactButton:hover .icon {
    color: var(--mantine-color-indigo-6);
}

.artifactButton[data-artifact-open='true'] .icon {
    color: var(--mantine-color-indigo-6);
}

.artifactButton[data-artifact-open='true']:hover .icon {
    color: var(--mantine-color-indigo-7);
}

.content {
    flex: 1;
    min-width: 0;
}

.title {
    color: var(--mantine-color-ldGray-8);
    line-height: 1.4;
    transition: color 0.12s ease;
}

.artifactButton:hover .title {
    color: var(--mantine-color-ldGray-9);
}

.artifactButton[data-artifact-open='true'] .title {
    font-weight: 500;
}

/* Focus state */
.artifactButton:focus-visible {
    outline: 2px solid var(--mantine-color-indigo-4);
    outline-offset: 2px;
}
